<template>
  <div class="framework">
      <Header></Header>
    <div class="body">
      <div class="left-sider">
        <MenuList @menuSelected="updateCurrentMenu"></MenuList>
        <div class="menu-sub-list">
            <!--对应的menu-sub-list-->
          <component :is="currentSubComponent"></component>
            <!--空间使用-->
          <div class="space-info">
            <div>空间使用</div>
            <div class="percent"></div>
          </div>
        </div>
      </div>
      <div class="body-content">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref, reactive, getCurrentInstance, nextTick, computed} from "vue";
import Header from "@/views/Framework/Header.vue";
import MenuList from "@/views/Framework/MenuList.vue";
import HomePage from "@/views/HomePage/HomePage.vue";
import Share from "@/views/Share/Share.vue";
import RecycleBin from "@/views/RecycleBin/RecycleBin.vue";

const { proxy } = getCurrentInstance();

const currentMenu = ref({id:1});

const updateCurrentMenu = (menu) => {
  console.log("菜单",menu);
  currentMenu.value.id = menu;
};

const currentSubComponent = computed(() => {
  console.log("计算属性")
  switch (currentMenu.value.id) {
    case 1:
      return HomePage;
    case 2:
      return Share;
    case 3:
      return RecycleBin;
    default:
      return null;
  }
});

</script>


<style scoped lang="scss">
.framework{
  display: flex;
  flex-direction: column;
  height:100vh;
  overflow: hidden;
}
.body{
  display: flex;
  overflow: hidden;
  .left-sider{
    border-right:1px solid #f1f2f4;
    display: flex;

    .menu-sub-list{
      width:200px;
      padding:20px 10px 0;
      position:relative;
      height: 100vh; /* 占据整个视口高度 */
      overflow: hidden; /* 隐藏溢出内容 */
      .space-info{
        position: absolute;
        bottom:10px;
        width:100%;
        padding:0 5px;
        .percent{
          padding-right:10px;
        }
        .space-use{
          margin-top:5px;
          color:#7e7e7e;
          display: flex;
          justify-content: space-around;
          .use{
            flex:1;
          }
          .iconfont{
            cursor:pointer;
            margin-right:20px;
            color:#05a1f5;
          }
        }
      }
    }
  }
  .body-content{
    flex:1;
    width:0;
    padding-left:20px;
  }
}
</style>